<template>
  <div class="main">
    <div class="navList-box" v-if="navList.length > 0">
      <div v-for="item in navList" :key="item.umID" class="navList">
        <p class="title"> <img src="../../assets/nav-p.png" alt=""> {{ item.unitName }}</p>

        <div class="container">
          <el-collapse  v-for="(child , idx2) in item.monitoringPoints" :key="idx2" v-model="activeName"   :class="{active: activeName === child.unitId , elColl:true}"   accordion>
            <el-collapse-item  :name="child.umID" >
              <template slot="title">
                <p class="selectTitle">{{ child.monitorPointName }}</p>
              </template>
              <div v-for="(level3 , idx3) in child.childList" :key="idx3" @click="changeChild(level3.id , child)" :class="{activeChild: (activeChildName == level3.id) && (parentClickId == child.umID)}" class="child">{{ level3.name }}</div>
              
            </el-collapse-item>
          
          </el-collapse>
        </div>


      </div>



       
      

    </div>
   
    
  </div>
</template>

<script>
import Emitter from '../../utils/emit' ;
import {getSiteName} from '../../api/index'
export default {
  props: {
    // subTitle: {
    //   type: String,
    //   default: () => '北京石景山泰然大厦'
    // },
    // ids: {
    //   type: Array,
    //   default: () => [1 , 2 , 3]
    // }
  },

  data() {
    return {
      showTab:'',
      activeName: 1 ,
      activeChildName: 1,
      parentClickId : 1,
      childList:[{name: "监测动态", id: 1},{name: "实时观测", id: 2},{name: "数据管理", id: 3}, {name: "入住管理", id: 4}] ,
      navList:[],
    };
  },
  created() { //默认选中第一页
    let that = this ;
    this.getNavData().then( res => {
      that.changeChild(1 , res[0].monitoringPoints[0]) ;
    }) ;
  },
  methods: {
    changeParent(id) {
      this.parentClickId = id ;
      this.activeName = id ;
    },
    changeChild(id , obj , parent) {
        
      this.activeChildName = id ;
      this.changeParent(obj.umID) ;
      this.showTab = obj.umID ;
      // 修改组件触发条件
      Emitter.emit('changePage',  this.activeName , this.activeChildName , obj) ;

    },
    async getNavData() {
      let taht = this ;
      let promise = new Promise( async(resolve , reject) => {
        let res =  await getSiteName() ;
        let result = res.data.data ;
        result = result.map( item=> {
            for (let i = 0 ; i < item.monitoringPoints.length  ; i++) {
              item.monitoringPoints[i].childList = [
                {name: "监测动态", id:1},
                {name: "实时观测", id:2},
                {name: "数据管理", id:3}, 
                {name: "入住管理", id:4}
              ]
            }
            return item ;
        });
        taht.navList = result ;
        resolve(result) ;
      })
      return promise ;
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 250px;
  height: calc(100vh - 80px - 50px);
  margin-right: 30px;
  padding-top: 17px;
  background: linear-gradient(270deg, rgba(140, 255, 226, 0.28) 0%, rgba(140, 255, 226, 0) 100%);
  border: 1px solid ;
  border-image: linear-gradient(181deg, rgba(134, 217, 255, 0) 7%, #B2FFB5 50%, rgba(134, 217, 255, 0) 98%) ;
  .navList {
    margin-bottom: 10px;
  }
  .title {
    display: flex;
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 500;
    width: 200px;
    height: 40px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgba(115, 255, 247, 0.3) 0%, rgba(115, 255, 247, 0) 100%);
    img {
      width: 22px;
      margin: 0 10px;
    }
  }
  .container {
    width: 100%;
    padding: 10px 24px;

  }
}
::v-deep .el-collapse {
  border: none;
  background: linear-gradient(90deg, rgba(115, 255, 247, 0.3) 0%, rgba(115, 255, 247, 0) 100%);
  margin-bottom: 10px;
}
::v-deep .el-collapse-item__header {
  // background: linear-gradient(90deg, rgba(115, 255, 247, 0.3) 0%, rgba(115, 255, 247, 0) 100%) !important;
  border: none;
  background: none;
  // 
  color: #fff;
  text-align: center !important;
  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: 500;
  .selectTitle {
    width: 100%;
    text-align: center;
  }
  p {
   
  }
}
::v-deep .active .el-collapse-item__header {
  background: linear-gradient(88deg, rgba(178, 255, 181, 0.49) 0%, rgba(178, 255, 181, 0) 99%);
}


::v-deep .el-collapse-item__header .el-collapse-item__name {
  color: #fff;
  // font-size: 16px;
}
::v-deep .el-collapse-item__content {
  background: none;
  padding-left: 10px;
  padding-bottom: 10px;
  >div {
    width: 184px;
    height: 30px;
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
    color: #fff;
    cursor: pointer;
  }
  >div:hover {
    background: linear-gradient(90deg, rgba(115, 255, 247, 0.3) 0%, rgba(115, 255, 247, 0) 100%);
  }
  .activeChild {
    background: linear-gradient(270deg, rgba(178, 255, 181, 0) 0%, rgba(178, 255, 181, 0.37) 100%);
    color: #B2FFB5;
  }

}
::v-deep .el-collapse-item__wrap  {
  background: transparent;
  border: none;
}

</style>